import React from 'react';
import {Form, Input, Button, message} from 'antd';
import 'antd/dist/reset.css';
import './RegisteredPage.css';
import {useNavigate} from 'react-router';
import {registered} from "../../api/login.js";
import backgroundImage from "../../../public/loginBackground.png";

const RegisteredPage = () => {
    const [form] = Form.useForm();
    const navigate = useNavigate();

    const onFinish = async (values) => {
        try {
            const res = await registered(values);
            if (res.code === 200 && res.data === "注册成功") {
                message.success('注册成功');
                setTimeout(() => {
                    navigate('/login'); // 注册成功后跳转到登录页
                }, 1000);
            } else if (res.data === "该用户名已存在") {
                message.error("该用户名已存在");
            } else {
                message.error(res.message || '注册失败');
            }
        } catch (error) {
            console.error(error);
        }
    };

    return (
        <div className="registered-container" style={{
            backgroundImage: `url(${backgroundImage})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        }}
        >
            <div className="registered-form-wrapper">
                <div className="registered-form">
                    <div style={{textAlign: 'center', marginBottom: 24}}>
                        <h2>
                            <img src="/public/logo.jpg" style={{height: 40, width: 40}}/>用户注册
                        </h2>
                    </div>
                    <Form
                        form={form}
                        name="register"
                        layout="vertical"
                        onFinish={onFinish}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[
                                {required: true, message: '请输入用户名!'},
                                {min: 3, message: '用户名至少3个字符'},
                            ]}
                        >
                            <Input placeholder="请输入用户名"/>
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {required: true, message: '请输入密码!'},
                                {min: 6, message: '密码至少6位'},
                            ]}
                        >
                            <Input.Password placeholder="请输入密码"/>
                        </Form.Item>

                        <Form.Item
                            label="确认密码"
                            name="confirm"
                            dependencies={['password']}
                            rules={[
                                {required: true, message: '请确认密码!'},
                                ({getFieldValue}) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('两次输入的密码不一致!'));
                                    },
                                }),
                            ]}
                        >
                            <Input.Password placeholder="请再次输入密码"/>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" block>
                                注册
                            </Button>
                        </Form.Item>

                        <div style={{textAlign: 'center'}}>
                            已有账号？
                            <a onClick={() => navigate('/login')} style={{marginLeft: 8}}>
                                立即登录
                            </a>
                        </div>
                    </Form>
                </div>
            </div>
        </div>
    );
};

export default RegisteredPage;